「原來如此！好像很厲害！！」聽完我的介紹後，Wayne 一副饒有興致的樣子。

「對呀！想不想學阿？！我教你！」看到 Wayne 這麼有興趣，當然就是要趁勢推他入坑啦，嘿嘿。

「好阿！那我們要從哪裡開始？」Wayne 邊說邊從他的背包裡拿出他的電腦。

「那就先從環境架設開始吧！我跟你說...」

Node.js 與 NPM

以前的前端套件大多數是函式庫的形式，每次引用的時候都是將事先到官網下載好的檔案引入，或是直接引入線上的連結。像是：

<!-- 線上連結 -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<!-- 檔案 -->
<script src="assets/js/lib/jquery.min.js"></script>

而在 Node.js 與其套件管理系統 NPM （Node Package Manager） 的蓬勃發展下，現今的前端框架已大多是基於這套系統的架構上開發 （其他的套件本版管理系統如 yarn，但本系列文不會特別介紹） ，Angular 也不例外。所以首先要做的事就是先到官網下載並安裝 （本系列文分享的是最簡單的安裝方式） 。

到了官網之後會看到如上圖所示的兩顆按鈕。LTS 是大多數人都在使用的版本；Current 則是目前最新的版本。點擊 LTS 的按鈕下載，然後一直按「下一步」即可。

安裝完成之後要怎麼檢查是否已經確實安裝完成呢？開啟你的終端機或命命列提示工具（找不到或不知道的朋友再麻煩你自行 Google），輸入：

node -v

如果輸入完有印出類似下圖的版本資訊，就表示你的電腦已經將 Node.js 裝好囉！ （其實安裝之前也可以先試著輸入看看，搞不好你的電腦已經安裝過了，只是你不知道而已） 。

裝完 Node.js 之後，接下來要裝的就是 NPM 了！等等，其實安裝 Node.js 的時候，其實也一併把 NPM 安裝好了 （Node.js 0.6.3 版之後就將 NPM 內建了） ！要怎麼檢查是否已經確實安裝完成呢？跟 Node.js 的檢查方式類似，輸入：

npm -v

跟 Node.js 一樣，有看到類似下圖的版本資訊就表示你的電腦也已經將 NPM 裝好囉！

Angular CLI

Angular CLI 是 Angular 的命令列工具。雖說是工具，但我個人覺得，如果 Angular 沒有了它，Angular 都不 Angular 了！

還記得我剛剛開始接觸 AngularJS 以及相關環境建置的套件如 Webpack、Gulp、Karma、Protractor 的時候，光是將這些東西組裝起來，令其能夠在我改了程式碼之後自動刷新頁面、下了指令可以幫我將程式碼打包起來等等這些事情，就讓我足足花了一個禮拜的時間才完成！ （對不起我太遜了，嗚嗚！） 那時我心裡還想說：哇靠！前端怎麼變得這麼難？！這下腫了。直到我遇見了 Angular CLI 才知道，原來這一切其實可以這麼簡單！

事不宜遲，讓我們趕快來安裝 Angular CLI 吧！！安裝的方式非常簡單，在終端機中輸入以下指令：

npm install -g @angular/cli

等它跑完就安裝完成囉！！想要檢查是否有確實安裝完成的話，一樣在終端機中輸入：

ng -v

如果終端機有印出類似下圖的版本資訊，那代表 Angular CLI 也已經安裝完成囉！我們可以開始建立我們第一個 Angular 專案了！！

如果讀者輸入 ng -v 沒有看到類似上圖的版本資訊的話，請改為輸入 ng version 或是 ng v ， ng -v 這個指令已在某個版本移除了（貌似是 Angular 7）

在開始建立前，建議先將你終端機的當前目錄移動到你想要的位置之後，再輸入以下指令：

ng new HelloAngular

輸入完之後，一樣讓子彈飛一陣子，等它跑完之後，先輸入以下指令進入我們剛剛新建的專案目錄裡：

cd HelloAngular

接著再輸入：

ng serve

一樣等它跑完之後，打開瀏覽器並在網址列輸入 localhost:4200 後，應該會看到類似下圖的畫面。

當你看到這個畫面時，恭喜！！你就成功安裝完環境並建立了第一個 Angular 專案！！有沒有一種「我根本沒有做什麼事阿？！從安裝 Node.js 開始，我只打了七行指令而已耶？！」的感覺？！

沒錯！！這就是 Anuglar 想要讓你知道的事，環境與專案的建置就是這麼簡單！！當我建立完我第一個 Angular 專案的時候，我只有一個念頭：

「我之前花的那一個禮拜究竟是為了什麼？！」

VSCode

專案建立好了，接下來要開始 Coding 了！！我好興奮阿！！！！！

等一下！Coding 前沒有趁手的編輯器怎麼行呢？雖然很多人都已經有在用像是 Notepad++ 、 Sublime、Atom 等等之類的純文字編輯器，但我還是要推一下微軟推出的這套編輯器：VSCdoe （Visual Studio Code） 。至於我為什麼推薦用 VSCode 呢？其實很多人都有寫過推坑的文章如：

• 新一代的編輯器 — VSCode
• 為什麼我從 Sublime Text 跳槽 Visual Studio Code？

所以在此我就不再贅述，趕快下載來用就對了！！

安裝完 VSCode 之後，一定要去下載一個叫做 Angular Extension Pack 的擴充套件。這個擴充套件是 Will 保哥將很多好用的 Angular 相關擴充套件都整合進一個擴充套件裡，只要安裝一個套件就能連帶安裝好其他相關套件，方便又好用！！

Augury

最後要安裝的工具叫做 Augury 。

我在上一篇文章有提到過，Augury 是 Angular 官方出版的開發者工具，透過 Chrome 或是 Firefox 的擴充功能來安裝。這套工具可以幫我們分析頁面中所用元件的狀態與方法。

安裝方式也很簡單，以 Chrome 來說，只要到線上應用程式商店之後，選擇擴充功能，在搜尋的文字框中輸入 Augury，即可找到並安裝。

安裝完之後，就可以在瀏覽器的開發者工具裡看到 Augury 的標籤，並且透過 Augury 看到應用程式目前的狀態：

如果有看到類似上圖的畫面，就表示 Augury 已經確實安裝完成囉！

因從 Angular 9 之後在 ng serve 時， ivy 預設開啟的關係，基本上 Augury 已經不適用，最近 Angular 官方有出了新的且更好用的 extension - Angular DevTools ，推薦大家使用這個唷

錯誤更新記錄

• 2019/05/28 11:20 - 非常感謝邦友 SuperMike 的提醒，增加 Angular Cli 指令的補充說明。